<template>
  <div>
    <FilterTable
        ref="table"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'records'"
        :height="'auto'"
        :isSelectColumn="false"
        :isToperInfo="false"
        columnsRef="ysjStore2019100801Table"
        :onColumnsChange="columns => (this.columns = columns)"
      >
        <template slot="controls">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addDissatisfaction">新增</el-button>
        </template>
      </FilterTable>

    <BaseDialog
      :visible.sync="visible"
      :title="(type == 'add' ? '新增不满意原因' : '修改不满意原')"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
    >
      <dissatisfactionDetail :type="type" :rowData="row" @changeHandle="changeHandle" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { getCareBaseDateList,inOrUpDissatisfiedCause } from '@/api/customerCare/visitRules/dissatisfaction';
import dissatisfactionDetail from './dissatisfactionDetail';

export default {
  name: 'store',
  mixins: [dictionary],
  components: {dissatisfactionDetail},
  data(){
    this.Table = null;
    return {
      columns: this.createTableColumns(),
      fetchApi: getCareBaseDateList,
      fetchParams: {"baseDataType":1001},
      type: '',
      row: {},
      visible: false,
    }
  },
  methods: {
    createTableColumns(){
      return [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          align: 'center',
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editDissatisfaction(props.row)}>
                  修改
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.deleteDissatisfaction(props.row)}>
                  删除
                </el-button>
              </div>
            );
          }
        },
        {
          title: '不满意原因',
          dataIndex: 'baseDataName',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ]
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    closeHandler(val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    addDissatisfaction(){
      this.type = 'add';
      this.visible = true;
    },
    editDissatisfaction(row){
      this.row = row;
      this.type = 'edit';
      this.visible = true;
    },
    deleteDissatisfaction(row){
      inOrUpDissatisfiedCause({"baseDataId":row.baseDataId,"isDelete":1}).then(res=>{
        if(res.resultCode===200){
          this.$message.success('删除成功!');
          this.fetchParams = { ...this.fetchParams };
        }else{
          this.$message.success('删除失败!');
        }
      })
    }
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  }
}
</script>
